<template>
	<view class="container">
		<!-- 顶部装饰 -->
		<view class="header">
			<text class="title">💑 爱情故事集 💑</text>
			<text class="subtitle">记录每一个浪漫瞬间</text>
		</view>

		<!-- 故事列表 -->
		<scroll-view class="story-list" scroll-y>
			<view 
				class="story-card" 
				v-for="(story, index) in stories" 
				:key="index"
				@click="showStoryDetail(index)"
			>
				<view class="story-cover">
					<image class="cover-image" :src="story.coverImage" mode="aspectFill"></image>
					<view class="story-date">{{story.date}}</view>
				</view>
				<view class="story-info">
					<text class="story-title">{{story.title}}</text>
					<text class="story-preview">{{story.preview}}</text>
					<view class="story-footer">
						<view class="story-stats">
							<text class="stat-item">❤️ {{story.likes}}</text>
							<text class="stat-item">💭 {{story.comments}}</text>
						</view>
						<text class="read-more">查看更多</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 故事详情弹窗 -->
		<view class="modal" v-if="showModal" @click="closeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">{{currentStory.title}}</text>
					<text class="close-btn" @click="closeModal">×</text>
				</view>
				<scroll-view class="modal-body" scroll-y>
					<image 
						class="story-full-image" 
						:src="currentStory.coverImage" 
						mode="widthFix"
					></image>
					<view class="story-content">
						<text class="story-text">{{currentStory.content}}</text>
					</view>
					<view class="story-actions">
						<view class="action-btn like" @click="likeStory">
							<text class="action-icon">❤️</text>
							<text class="action-text">喜欢</text>
						</view>
						<view class="action-btn share" @click="shareStory">
							<text class="action-icon">📤</text>
							<text class="action-text">分享</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			stories: [
				{
					title: '初见时的心动',
					preview: '那天阳光正好，微风不燥，是我们相遇的最美时刻...',
					content: '那天阳光正好，微风不燥，是我们相遇的最美时刻。在人来人往的街角，你的笑容如春风般温暖，让时间仿佛在那一刻静止。我们的故事，就这样开始了...',
					coverImage: '/static/images/story1.jpg',
					date: '2024-01-15',
					likes: 128,
					comments: 32
				},
				{
					title: '浪漫的约定',
					preview: '在星空下许下的承诺，是最浪漫的誓言...',
					content: '在那个繁星点点的夜晚，我们坐在海边的沙滩上，听着浪花轻轻拍打岸边的声音。你指着天空中最亮的那颗星星，说要把它送给我。那一刻，我感觉整个世界都在为我们见证这个美好的约定...',
					coverImage: '/static/images/story2.jpg',
					date: '2024-02-14',
					likes: 256,
					comments: 64
				},
				{
					title: '甜蜜的日常',
					preview: '平凡的日子里，因为有你的陪伴而变得特别...',
					content: '生活不是电影，但平凡的日子因为有你的陪伴而变得格外温暖。一起逛超市时的打闹，下班后一起散步的惬意，生病时你细心的照顾，这些都是最珍贵的回忆...',
					coverImage: '/static/images/story3.jpg',
					date: '2024-03-01',
					likes: 192,
					comments: 48
				}
			],
			showModal: false,
			currentStory: null
		}
	},
	methods: {
		showStoryDetail(index) {
			this.currentStory = this.stories[index];
			this.showModal = true;
		},
		
		closeModal() {
			this.showModal = false;
			this.currentStory = null;
		},
		
		likeStory() {
			if (this.currentStory) {
				this.currentStory.likes++;
				uni.showToast({
					title: '已点赞',
					icon: 'success'
				});
			}
		},
		
		shareStory() {
			uni.showShareMenu({
				withShareTicket: true,
				success() {
					console.log('打开分享菜单成功');
				},
				fail() {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			});
		}
	}
}
</script>

<style>
.container {
	min-height: 100vh;
	background: linear-gradient(180deg, #FFF0F5 0%, #FFE4E1 100%);
	padding: 40rpx;
}

.header {
	text-align: center;
	margin-bottom: 60rpx;
}

.title {
	font-size: 48rpx;
	color: #FF1493;
	font-weight: bold;
	text-shadow: 0 2rpx 4rpx rgba(255,20,147,0.2);
}

.subtitle {
	font-size: 28rpx;
	color: #DB7093;
	margin-top: 20rpx;
	display: block;
}

.story-list {
	height: calc(100vh - 240rpx);
}

.story-card {
	background: rgba(255,255,255,0.9);
	border-radius: 24rpx;
	margin-bottom: 40rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 24rpx rgba(255,182,193,0.2);
	transition: all 0.3s ease;
}

.story-card:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 12rpx 36rpx rgba(255,182,193,0.3);
}

.story-cover {
	position: relative;
	height: 360rpx;
}

.cover-image {
	width: 100%;
	height: 100%;
}

.story-date {
	position: absolute;
	bottom: 20rpx;
	right: 20rpx;
	background: rgba(255,255,255,0.9);
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	font-size: 24rpx;
	color: #FF69B4;
}

.story-info {
	padding: 30rpx;
}

.story-title {
	font-size: 32rpx;
	color: #FF1493;
	font-weight: bold;
	margin-bottom: 16rpx;
}

.story-preview {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
	margin-bottom: 20rpx;
}

.story-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.story-stats {
	display: flex;
	gap: 20rpx;
}

.stat-item {
	font-size: 24rpx;
	color: #FF69B4;
}

.read-more {
	font-size: 24rpx;
	color: #FF1493;
	padding: 8rpx 16rpx;
	border: 2rpx solid #FF1493;
	border-radius: 32rpx;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.modal-content {
	width: 90%;
	max-height: 90vh;
	background: white;
	border-radius: 24rpx;
	overflow: hidden;
}

.modal-header {
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2rpx solid #FFE4E1;
}

.modal-title {
	font-size: 36rpx;
	color: #FF1493;
	font-weight: bold;
}

.close-btn {
	font-size: 48rpx;
	color: #999;
	padding: 0 20rpx;
}

.modal-body {
	max-height: calc(90vh - 200rpx);
}

.story-full-image {
	width: 100%;
}

.story-content {
	padding: 40rpx;
}

.story-text {
	font-size: 30rpx;
	color: #333;
	line-height: 1.8;
}

.story-actions {
	display: flex;
	justify-content: space-around;
	padding: 30rpx;
	border-top: 2rpx solid #FFE4E1;
}

.action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10rpx;
}

.action-icon {
	font-size: 48rpx;
}

.action-text {
	font-size: 24rpx;
	color: #666;
}

.like:active .action-icon,
.share:active .action-icon {
	transform: scale(1.2);
}
</style> 